<style>
    input[type=checkbox]{width:17px;height:17px;}
    label{cursor:pointer;margin-left:5px;margin-right:20px;vertical-align:top;}
</style>

<div class="layui-form-pane" style="padding:20px;">
    <div class="checkboxes">
        <div class="layui-form-item">
            <input type="checkbox" name="power" id="12"><label for="12">12</label>
            <input type="checkbox" name="power" id="34"><label for="34">34</label>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="power" id="56"><label for="56">56</label>
            <input type="checkbox" name="power" id="78"><label for="78">78</label>
        </div>
    </div>

    <div class="layui-form-item">
        <button id="power_set" class="layui-btn layui-btn-fluid layui-bg-cyan">设置</button>
    </div>
</div>

<script>
    $(function(){
        GetPowers();
    });

    function GetPowers(){
        var url = '/handler/permission/getPowerList';
        var data = {page:1,pagesize:99999};
        dink.post(url,data,function(res){
            if(res.ret == 1){
                var target = $('.checkboxes');
                var html = '';
                $.each(res.data,function(i,ele){
                    if(ele.pid == 0){
                        //一层
                        html += '<div class="layui-form-item">';
                        html += '<input type="checkbox" name="power" value="'+ele.id+'" data-pid="0" id="'+ele.id+'"><label for="'+ele.id+'">'+ele.name+'</label>';
                        html += '</div>';
                        //二层
                        html += '<div style="margin-left:30px;">';
                        $.each(res.data,function(i2,ele2){
                            if(ele2.pid == ele.id){
                                html += '<div class="layui-form-item">';
                                html += '<input type="checkbox" name="power" value="'+ele2.id+'" data-pid="'+ele2.pid+'" id="'+ele2.id+'"><label for="'+ele2.id+'">'+ele2.name+'</label>';
                                html += '</div>';
                                //三层
                                html += '<div style="margin-left:30px;" class="layui-form-item">';
                                $.each(res.data,function(i3,ele3){
                                    if(ele3.pid == ele2.id){
                                        html += '<input type="checkbox" name="power" value="'+ele3.id+'" data-oid="'+ele.id+'" data-pid="'+ele3.pid+'" id="'+ele3.id+'"><label for="'+ele3.id+'">'+ele3.name+'</label>';
                                    }
                                });
                                html += '</div>';
                            }
                        });
                        html += '</div>';
                    }
                });
                target.html(html);
            }else{
                layer.msg('未获取到数据');
            }
        });
    }

    //父级选中，子级默认选中
    dink.click('input[type=checkbox]',function(){
        var oid = $(this).attr('data-oid');
        var pid = $(this).attr('data-pid');
        var id = $(this).val();
        var is_checked = $(this).is(':checked');
        if(pid == 0){
            $('input[type=checkbox][data-oid='+id+']').prop('checked',is_checked);
            $('input[type=checkbox][data-pid='+id+']').prop('checked',is_checked);
        }else if(!oid){
            if(is_checked){
                $('input[type=checkbox][value='+pid+']').prop('checked',is_checked);
            }
            $('input[type=checkbox][data-pid='+id+']').prop('checked',is_checked);
        }else{
            if(is_checked){
                $('input[type=checkbox][value='+oid+']').prop('checked',is_checked);
                $('input[type=checkbox][value='+pid+']').prop('checked',is_checked);
            }
        }
    });
</script>
